<template>
  <div class="container">
    <div class="header">
      <div class="welcome_word">{{teacherInfo.teacherName}}教师: 您好</div>
      <el-button class="logout_button" @click="logout">退出系统</el-button>
    </div>
    <div class="basic_info">
      <div class="block_name">您的管理信息</div>
      <div class="teacher_info">
        <div class="teacher_name">{{teacherInfo.teacherName}}</div>
        <div class="teacher_gender">{{teacherInfo.gender=0?'男':'女'}}</div>
        <div class="teacher_phone">{{teacherInfo.phoneNum}}</div>
        <div class="teacher_position">{{teacherInfo.position}}</div>
      </div>
      <div class="class_list">
        <el-table :data="classBasicInfoList" border >
          <!-- 班级ID显示列 -->
          <el-table-column
            prop="id"
            label="班级ID"
            align="center"
          ></el-table-column>
          <!-- 年级显示列 -->
          <el-table-column
            prop="grade"
            label="年级"
            align="center"
          ></el-table-column>
          <!-- 班级显示列 -->
          <el-table-column
            prop="className"
            label="班级"
            align="center"
          ></el-table-column>
          <!-- 学生人数显示列 -->
          <el-table-column
            prop="studentCount"
            label="学生人数"
            align="center"
          ></el-table-column>
          <!-- 操作按钮显示列 -->
          <el-table-column
            label="操作"
            align="center"
          >
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="work_info">
      <div class="block_name">您的工作</div>
      <div class="teacher_info">
        <div class="teacher_name">{{teacherInfo.teacherName}}</div>
        <div class="teacher_gender">{{teacherInfo.gender=0?'男':'女'}}</div>
        <div class="teacher_phone">{{teacherInfo.phoneNum}}</div>
        <div class="teacher_position">{{teacherInfo.position}}</div>
      </div>
      <div class="class_list">
        <el-table :data="classBasicInfoList" border >
          <!-- 班级ID显示列 -->
          <el-table-column
            prop="id"
            label="班级ID"
            align="center"
          ></el-table-column>
          <!-- 年级显示列 -->
          <el-table-column
            prop="grade"
            label="年级"
            align="center"
          ></el-table-column>
          <!-- 班级显示列 -->
          <el-table-column
            prop="className"
            label="班级"
            align="center"
          ></el-table-column>
          <!-- 学生人数显示列 -->
          <el-table-column
            prop="studentCount"
            label="学生人数"
            align="center"
          ></el-table-column>
          <!-- 操作按钮显示列 -->
          <el-table-column
            label="操作"
            align="center"
          >
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="message_info">
      <div class="block_name">您的消息</div>
      <div class="teacher_info">
        <div class="teacher_name">{{teacherInfo.teacherName}}</div>
        <div class="teacher_gender">{{teacherInfo.gender=0?'男':'女'}}</div>
        <div class="teacher_phone">{{teacherInfo.phoneNum}}</div>
        <div class="teacher_position">{{teacherInfo.position}}</div>
      </div>
      <div class="class_list">
        <el-table :data="classBasicInfoList" border >
          <!-- 班级ID显示列 -->
          <el-table-column
            prop="id"
            label="班级ID"
            align="center"
          ></el-table-column>
          <!-- 年级显示列 -->
          <el-table-column
            prop="grade"
            label="年级"
            align="center"
          ></el-table-column>
          <!-- 班级显示列 -->
          <el-table-column
            prop="className"
            label="班级"
            align="center"
          ></el-table-column>
          <!-- 学生人数显示列 -->
          <el-table-column
            prop="studentCount"
            label="学生人数"
            align="center"
          ></el-table-column>
          <!-- 操作按钮显示列 -->
          <el-table-column
            label="操作"
            align="center"
          >
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import {getTeacherInfo, getClassBasicInfo} from "@/api/teacher";

export default {
  name: "index",

  data () {
    return {
      teacherInfo: {},
      classBasicInfoList: []
    };
  },

  mounted () {
    let {userInfo} = this.$route.query;
    let teacher_id = userInfo.teacherId;
    getTeacherInfo(teacher_id).then(res => {
      console.log('TeacherInfo:' + res.data);
      this.teacherInfo = res.data
    })
    getClassBasicInfo(teacher_id).then(res => {
      console.log('ClassBasicInfo' + res.data);
      this.classBasicInfoList.push(res.data);
    })
  },

  methods: {
    // 按钮点击事件 -- 退出登录
    async logout () {
      await this.$store.dispatch('user/resetToken');
      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
    },

    // 按钮点击事件 -- 表格按钮1
    handleClick (object) {
      console.log(object)
    }
  }
}
</script>

<style scoped>
  .container {
    width: 100%;
    height: auto ;
    border: solid 1px black;
  }

    .header {
      width: 100%;
      height: 60px;
      border-bottom: solid 1px black;
      margin-top: 30px;
      padding: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
      .welcome_word {
        font-size: 20px;
        margin-right: 10px;
      }
      .logout_button {
        font-size: 15px;
      }

    .basic_info, .work_info, .message_info {
      width: 100%;
      height: auto;
      border: solid 1px red;
      margin-top: 10px;
      padding: 10px;
    }
      .block_name {
        font-size: large;
        font-family: "Cooper Black";
        margin: 5px;
        border-bottom: solid 1px black;
      }
      .teacher_info{
        width: 100%;
        height: 40%;
        border: solid 1px green;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }
        .teacher_name, .teacher_gender, .teacher_phone, .teacher_position {
          border: solid 1px black;
          font-size: 18px;
        }
      .class_list{
        width: 100%;
        height: auto;
        border: solid 1px blue;
        margin-top: 10px;
      }
</style>
